<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>周计划录入</title>

    <% include ../../layouts/import.ejs %>

</head>
<body>
<% include ../../layouts/header.ejs %>
<div class="index container weekly-body">

    <div class="we-title row">
        <h2 class="col-md-4">周计划录入</h2>
    </div>

    <div class="we-btns clearfix">
        <!--  <div class="pull-left we-btn">
              <input type="button" value="录入日期选择" class="btn btn-primary">
          </div>-->

        <a href="javascript:void(0)" class="btn btn-primary pull-left we-btn" id="addProCont">添加项目模块</a>
        <button id="submitBtn">保存</button>
    </div>
    <form id="planListForm" action="/daily/weekPlan/savePlanList" method="post">
        <!--<input type="submit" value="确认提交" class="btn btn-primary we-submit ">-->
        <div class="we-pros">
            <table class="table table-striped we-pro">
                <thead>
                <tr class="we-proname-box form-inline">
                    <td class="form-grap  col-md-5" colspan="2" style="position: relative">
                        <select name="project_id" id="" class="form-control we-pro-choose">
                            <option value="not">请选择项目</option>
                            <% for(var i = 0; i < projectList.length; i++) { %>
                            <option value="<%= projectList[i].id %>"><%= projectList[i].project_name %></option>
                            <% } %>
                        </select>

                    </td>
                    <td class="form-grap  col-md-3" colspan="2">
                        <span class="we-proplan-ts">至少有一条项目计划，不可删除</span>
                    </td>
                    <td class="form-grap  col-md-4 ">
                        <a href="javascript:void (0)" class="btn btn-danger pull-right we-pro-delete ">删除模块</a>
                    </td>
                </tr>
                </thead>
                <tbody class="we-proplans">
                <tr class=" form-inline we-proplan">
                    <td class="form-grap col-md-3">
                        <input type="text" value="" placeholder="任务名称" class="form-control"
                               name="task_name">
                    </td>
                    <td class="form-grap col-md-2">
                        <select name="assignee_id" id="" class="form-control">
                            <% for(var i = 0; i < userList.length; i++) { %>
                            <option value="<%= userList[i].id %>" selected><%= userList[i].person_name %></option>
                            <% } %>
                        </select>
                    </td>
                    <td class="form-grap col-md-2">
                        <input type="text" value="" id="datepicker1" placeholder="完成日期" class="form-control"
                               name="complete_time">
                    </td>
                    <td class="form-grap col-md-3">
                        <input type="text" value="" placeholder="备注" class="form-control" name="remark">
                    </td>
                    <td class="form-grap col-md-2">
                        <a href="javascript:void(0)" title="删除本条计划"
                           class="glyphicon glyphicon-trash form-control we-proplan-delete"></a>
                        <a href="javascript:void(0)" title="添加一条新计划"
                           class="glyphicon glyphicon-plus-sign form-control we-proplan-add"></a>
                    </td>
                </tr>
                </tbody>

            </table>
        </div>
    </form>
</div>
<script>

    $(function () {
        //添加项目模块
        $("#addProCont").on("click", function () {
            var proContNum = $('.we-pro-delete').length;

            var projectHtml = '<option value="not">请选择项目</option>'
            <% for(var i = 0; i < projectList.length; i++) { %>
            projectHtml += '<option value="<%= projectList[i].id %>"><%= projectList[i].project_name %></option>';
            <% } %>
            var userHtml = '';
            <% for(var i = 0; i < userList.length; i++) { %>
            userHtml += '<option value="<%= userList[i].id %>" selected><%= userList[i].person_name %></option>';
            <% } %>

            $(".we-pros").append('<table class="table table-striped we-pro ">' +
                '<thead>' +
                '<tr class="we-proname-box form-inline">' +
                '<td class="form-grap  col-md-5" colspan="2" style="position: relative">' +
                '<select name="planList[' + proContNum + '][project_id]" id="" class="form-control we-pro-choose" >' +
                projectHtml +
                '</select>' +
                '</td>' +
                '<td class="form-grap  col-md-3" colspan="2">' +
                '<span class="we-proplan-ts">至少有一条项目计划，不可删除</span>' +
                '</td>' +
                '<td class="form-grap  col-md-4 ">' +
                '<a href="javascript:void (0)"  class="btn btn-danger pull-right we-pro-delete ">删除模块</a>' +
                '</td>' +
                '</tr>' +
                '</thead>' +
                '<tbody class="we-proplans">' +
                '<tr class=" form-inline we-proplan">' +
                '<td class="form-grap col-md-3">' +
                '<input type="text" value="" placeholder="任务名称" class="form-control taskNameInput" name="task_name">' +
                '</td>' +
                '<td class="form-grap col-md-2">' +
                '<select name="assignee_id" id="" class="form-control">' +
                userHtml +
                '</select>' +
                '</td>' +
                '<td class="form-grap col-md-2">' +
                '<input type="text" value="" placeholder="完成日期" class="form-control" name="complete_time">' +
                '</td>' +
                '<td class="form-grap col-md-3">' +
                '<input type="text" value="" placeholder="备注" class="form-control" name="remark">' +
                '</td>' +
                '<td class="form-grap col-md-2">' +
                '<a href="javascript:void(0)" title="删除本条计划" class="glyphicon glyphicon-trash form-control we-proplan-delete"></a>' +
                '<a href="javascript:void(0)" title="添加一条新计划" class="glyphicon glyphicon-plus-sign form-control we-proplan-add"></a>' +
                '</td>' +
                '</tr>' +
                '</tbody>' +

                '</table>'
            );
        });

        //删除任务
        $("body").on("click", ".we-proplan-delete", function () {
            var outtimer;
            clearTimeout(outtimer);
            var thisWePro = $(this).parents(".we-pro");
            var plannum = thisWePro.find(".we-proplan").length;
            if (plannum < 2) {
                thisWePro.find(".we-proplan-ts").show();

                outtimer = setTimeout(function () {
                    thisWePro.find(".we-proplan-ts").hide();
                }, 5000)
            } else {
                $(this).parents(".we-proplan").remove();
            }

        });
        //添加任务
        $("body").on("click", ".we-proplan-add", function () {
            var proContNum = $('.we-pro-delete').length - 1;
            var proplanNum = $(this).closest('table').find('.we-proplan-delete').length;

            var userHtml = '';
            <% for(var i = 0; i < userList.length; i++) { %>
            userHtml += '<option value="<%= userList[i].id %>" selected><%= userList[i].person_name %></option>';
            <% } %>
            $(this).parents(".we-proplan").after('<tr class=" form-inline we-proplan">' +
                '<td class="form-grap col-md-3">' +
                '<input type="text" value="" placeholder="任务名称" class="form-control taskNameInput" name="task_name">' +
                '</td>' +
                '<td class="form-grap col-md-2">' +
                '<select  name="assignee_id" id="" class="form-control">' +
                userHtml +
                '</select>' +
                '</td>' +
                '<td class="form-grap col-md-2">' +
                '<input type="text" value="" placeholder="完成日期" class="form-control" name="complete_time">' +
                '</td>' +
                '<td class="form-grap col-md-3">' +
                ' <input type="text" value="" placeholder="备注" class="form-control" name="remark">' +
                '</td>' +
                '<td class="form-grap col-md-2">' +
                '<a href="javascript:void(0)" title="删除本条计划" class="glyphicon glyphicon-trash form-control we-proplan-delete"></a>' +
                '<a href="javascript:void(0)" title="添加一条新计划" class="glyphicon glyphicon-plus-sign form-control we-proplan-add"></a>' +
                '</td>' + '</tr>'
            );
        });
        //删除项目模块
        $("body").on("click", ".we-pro-delete", function () {
            $(this).parents(".we-pro").remove();
        });

        //提交表单
        $('#submitBtn').click(function () {
            var formData = $('#planListForm').serialize();
            $.post('/daily/weekPlan/savePlanList', formData, function (result) {
                console.log(result);
            })
        });


    });
</script>
</body>
</html>